<template>
  <a-modal
    title="表名列表"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height:90%;">

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="btnLoading">确定</a-button>
    </template>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="padding-bottom: 10px;margin-bottom: 0">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="表名" style="padding-bottom: 0;margin-bottom: 0">
              <a-input placeholder="请输入表名" v-model="tableName" :allowClear="true" @pressEnter="searchFilter"
                       style="width: 200px;"></a-input>
              <a-button @click="searchFilter" type="primary" style="margin: 0 10px;">查询</a-button>
              <a-button @click="resetFilter">重置</a-button>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <a-spin :spinning="confirmLoading">
      <a-table
        ref="table"
        size="small"
        bordered
        :rowKey="(record, index) => index"
        :pagination="false"
        :columns="columns"
        :dataSource="dataSource"
        :locale="{'emptyText':emptyText}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAction, postAction} from '@/api/manage'

export default {
  name: 'JSelectTableName',
  data() {
    return {
      modalWidth: document.body.clientWidth * 0.5,
      visible: false,
      emptyText: '暂无数据',
      confirmLoading: false,
      btnLoading: false,
      queryTableName: '/actcandidateconfig/actCandidateConfig/queryTableName',
      metaSource: [],
      dataSource: [],
      tableName: '',
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '表名',
          align: "center",
          dataIndex: 'tableName'
        },
        {
          title: '表描述',
          align: "center",
          dataIndex: 'tableComment'
        }
      ],
      selectedRowKeys: [],
      selectionRows: []
    }
  },
  methods: {
    show() {
      this.visible = true
      this.btnLoading = false
      this.tableName = ''
      this.emptyText = '暂无数据'
      this.selectedRowKeys = []
      this.queryTables()
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      //如果选择的个数超过一个，清空之前的 选中最后选择的这个
      if (selectedRowKeys.length > 1) {
        this.selectedRowKeys = []
        this.selectionRows = []
        this.selectedRowKeys.push(selectedRowKeys[selectedRowKeys.length - 1])
        this.selectionRows.push(selectionRows[selectionRows.length - 1])
      } else {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
      }
      // console.log(this.selectionRows)
    },
    onClearSelected() {
      this.selectedRowKeys = []
    },
    queryTables() {
      this.confirmLoading = true
      getAction(this.queryTableName).then(res => {
        this.confirmLoading = false
        if (res.success) {
          this.dataSource = res.result
          this.metaSource = [...res.result]
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    searchFilter() {
      if (!this.tableName) {
        this.dataSource = [...this.metaSource]
      } else {
        this.dataSource = this.metaSource.filter((item) => item.tableName.indexOf(this.tableName) >= 0)
      }
    },
    resetFilter() {
      this.tableName = ''
      this.searchFilter()
    },
    handleCancel() {
      this.visible = false
      this.resetFilter()
    },
    handleSubmit() {
      if (this.selectionRows.length == 0 || !this.selectionRows) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.visible = false
      this.$emit('ok', this.selectionRows[0])
      this.selectionRows = []
    },
  }
}
</script>

<style scoped>
.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}
</style>